<template>
    <div class="workorder_parent">
        <!-- 工单 -->
        <box-group-wrap pageTitle="工单信息" :isShowData="isShowData">
            <template slot="wrapBody">
                <div class="workorder">
                    <div class="workorderItem itemleft">
                        <div class="item_img">
                            <img src="@/assets/img/khindex/dcl_icon.png" alt width="40px" />
                        </div>
                        <div class="item_right">
                            <a :href="ccwfUrl" target="_blank">
                                <p>待处理工单</p>
                                <span>{{workorderInfo.pending}}</span>
                            </a>
                        </div>
                    </div>
                    <div class="workorderItem itemcenter">
                        <div class="item_img">
                            <img src="@/assets/img/khindex/dxg_icon.png" alt width="40px" />
                        </div>
                        <div class="item_right">
                            <a :href="ccwfUrl" target="_blank">
                                <p>待修改工单</p>
                                <span>{{workorderInfo.revamp}}</span>
                            </a>
                        </div>
                    </div>
                    <div class="workorderItem itemright">
                        <div class="item_img">
                            <img src="@/assets/img/khindex/dlq_icon.png" alt width="40px" />
                        </div>
                        <div class="item_right">
                            <a :href="ccwfUrl" target="_blank">
                                <p>待领取工单</p>
                                <span>{{workorderInfo.toReceive}}</span>
                            </a>
                        </div>
                    </div>
                </div>
            </template>
        </box-group-wrap>
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
import BoxGroupWrap from '@/components/boxgroupwrap/BoxGroupWrap.vue';
import request from '@/apis/request';
export default {
    name: 'WorkOrder',
    data() {
        return {
            isShowData: true,
            workorderInfo: {
                pending: '',//待处理
                revamp: '',//待修改
                toReceive: '',// 待领取
            },
            ccwfUrl: '',//工作流路径
        }
    },
    components: { 'box-group-wrap': BoxGroupWrap, },
    mounted() {
        this.getParams()
        this.getWorkOrderInfo();
    },
    computed: {
        ...mapGetters([
            'userInfo',
        ])
    },
    methods: {
        // 获取工作流的URl   对应的服务地址参数
        async getParams() {
            await this.$post.Params.searchListByParam({ paramType: '工作流参数' }).then((res) => {
                if (res.data.success) {
                    const arr = JSON.parse(JSON.stringify(res.data.content));
                    arr.forEach((item) => {
                        if (item.paramCode === 'flowserver_backend_addr') {
                            // this.paramsObj[item.paramCode] = item.paramValue;
                            this.ccwfUrl = `/ccwf/bdf2.core.view.frame.main.MainFrame3.d?USERID=${this.userInfo.userAccount}&BANKNUM=6440`;
                            console.log('输出对应的URL地址————————————', item.paramValue);
                        }
                    });
                } else {
                    this.$message.error(res.data.msg);
                }
            });
        },
        // 
        getWorkOrderInfo() {
            const url = `/ccwf/history.action?CUSTNO=&BANKNUM=6440&USERID=${this.userInfo.userAccount}`;
            request({
                url,
                method: 'get',
            }).then((res) => {
                console.log('工作流系统', res);
                this.workorderInfo.pending = res.data.result.CREATEDNUM;
                this.workorderInfo.revamp = res.data.result.CLAIMNUM;
                this.workorderInfo.toReceive = res.data.result.TASKNUM;
            });
        }
    },
}
</script>
<style lang="scss">
.workorder_parent {
    .box-group-wrap .trainingMain {
        min-height: 125px;
    }
}
</style>
<style scoped lang="scss">
.workorder {
    display: flex;
    margin-top: 10px;
    .workorderItem {
        flex: 1;
        margin: 5px;
        display: flex;
        height: 102px;
        div.item_img {
            flex: 1;
            margin-top: 30px;
            margin-left: 14px;
        }
        div.item_right {
            flex: 2;
            margin-top: 20px;
            text-align: left;
            color: #fff;
            p {
                line-height: 28px;
                margin-left: 5px;
                /* font-weight: bold; */
            }
            span {
                line-height: 36px;
                font-size: 24px;
                font-weight: bold;
                margin-left: 22%;
            }
        }
    }
    .itemleft {
        background-image: url("../../../assets/img/khindex/dcl_bg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .itemcenter {
        background-image: url("../../../assets/img/khindex/dxg_bg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .itemright {
        background-image: url("../../../assets/img/khindex/dlq_bg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
}
</style>